<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/jquery.min.js"></script>
    <title>Document</title>
    <style> input { font-size: 40px;}</style>
</head>
<body>
    VUE  函数，计算属性，侦听器 区别？？？？
    https://autumnfish.cn/api/joke/list?num=3
    <div id="app">
         <h1> 笑话列表  {{tip}}</h1>
         <input type="text" v-model.lazy='n'>
         <p v-for="m in  jokes"> {{m}}</p>
    </div>
</body>
<script>
var vm = new Vue({
    el: "#app",
    data: {
       n: 0 ,
       tip: '',
       jokes: [] 
    },
    watch:{
        n: function(v){
            console.log( '更新为=' + v);
            this.tip = '查询中...';
            // ajax请求
            this.getlist(v);
        }  
    },
    methods:{
        getlist(v){
            // ajax
            console.log( '-------');
            let that = this;
            $.ajax({
                url: 'https://autumnfish.cn/api/joke/list?num='+v ,
                success:function(ret){
                    console.log(ret );
                    that.jokes = ret.data
                }
            })
        }
    }
});
</script>
</html>